import React, { Component } from "react";
import "./TodoMain.css";

export default class TodoMain extends Component {
    render() {
        //接受父级传入的 todos 属性
        let {todos} = this.props;
        return (
            <ul className="todo-main">
                {
                    todos.map(item => {
                        return <li key={item.id}>
                                    <label>
                                        <input type="checkbox" onChange={this.check(item.id)}  checked={item.done}  />
                                        <span>{item.title}</span>
                                    </label>
                                    <button
                                        className="btn btn-danger"
                                        style={{ display: item.done ? "block" : 'none' }}
                                        onClick={this.removeTodo(item.id)}
                                    >
                                        删除
                                    </button>
                                </li>
                    })
                }
                {
                    todos.length === 0 && <li className="empty">暂无任务</li>
                }
            </ul>
        );
    }
    //声明方法 删除任务
    removeTodo = (id) => {
        return () => {
            this.props.removeTodo(id);
        }
    }

    //声明方法
    check = (id) => {
        return (e) => {
            //调用父级传入的 checkTodo 方法
            this.props.checkTodo(id, e.target.checked);
        }
        // console.log(e.target.checked); // e.target.checked 获取多选框应该变成状态
    }
}
